<template>
    <a-drawer
        :title="formData.id ? '编辑我的试题历史' : '增加我的试题历史'"
        :width="600"
        :visible="visible"
        :destroy-on-close="true"
        :footer-style="{ textAlign: 'right' }"
        @close="onClose"
    >
        <a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
            <a-form-item label="考试ID：" name="examId">
                <a-input v-model:value="formData.examId" placeholder="请输入考试ID" allow-clear />
            </a-form-item>
            <a-form-item label="试题ID：" name="questionId">
                <a-input v-model:value="formData.questionId" placeholder="请输入试题ID" allow-clear />
            </a-form-item>
            <a-form-item label="用户ID：" name="userId">
                <a-input v-model:value="formData.userId" placeholder="请输入用户ID" allow-clear />
            </a-form-item>
            <a-form-item label="章节名称：" name="chapterName">
                <a-input v-model:value="formData.chapterName" placeholder="请输入章节名称" allow-clear />
            </a-form-item>
            <a-form-item label="章节描述：" name="chapterTxt">
                <a-input v-model:value="formData.chapterTxt" placeholder="请输入章节描述" allow-clear />
            </a-form-item>
            <a-form-item label="类型 （1：章节；2：试题）：" name="category">
                <a-input v-model:value="formData.category" placeholder="请输入类型 （1：章节；2：试题）" allow-clear />
            </a-form-item>
            <a-form-item label="分数：" name="score">
                <a-input v-model:value="formData.score" placeholder="请输入分数" allow-clear />
            </a-form-item>
            <a-form-item label="子分数：" name="scores">
                <a-input v-model:value="formData.scores" placeholder="请输入子分数" allow-clear />
            </a-form-item>
            <a-form-item label="阅卷选项（2：答案无顺序；3：不区分大小写；)：" name="markOptions">
                <a-input v-model:value="formData.markOptions" placeholder="请输入阅卷选项（2：答案无顺序；3：不区分大小写；)" allow-clear />
            </a-form-item>
            <a-form-item label="排序：" name="sortCode">
                <a-input v-model:value="formData.sortCode" placeholder="请输入排序" allow-clear />
            </a-form-item>
            <a-form-item label="选项排序，如：2,1,4,3：" name="optionsNo">
                <a-input v-model:value="formData.optionsNo" placeholder="请输入选项排序，如：2,1,4,3" allow-clear />
            </a-form-item>
            <a-form-item label="答题时间：" name="answerTime">
                <a-date-picker v-model:value="formData.answerTime" value-format="YYYY-MM-DD HH:mm:ss" show-time placeholder="请选择答题时间" style="width: 100%" />
            </a-form-item>
            <a-form-item label="用户答案：" name="userAnswer">
                <a-input v-model:value="formData.userAnswer" placeholder="请输入用户答案" allow-clear />
            </a-form-item>
            <a-form-item label="用户得分：" name="userScore">
                <a-input v-model:value="formData.userScore" placeholder="请输入用户得分" allow-clear />
            </a-form-item>
            <a-form-item label="阅卷用户ID：" name="markUserId">
                <a-input v-model:value="formData.markUserId" placeholder="请输入阅卷用户ID" allow-clear />
            </a-form-item>
            <a-form-item label="阅卷时间：" name="markTime">
                <a-date-picker v-model:value="formData.markTime" value-format="YYYY-MM-DD HH:mm:ss" show-time placeholder="请选择阅卷时间" style="width: 100%" />
            </a-form-item>
            <a-form-item label="版本：" name="ver">
                <a-input v-model:value="formData.ver" placeholder="请输入版本" allow-clear />
            </a-form-item>
            <a-form-item label="图片附件IDS：" name="imgFileIds">
                <a-input v-model:value="formData.imgFileIds" placeholder="请输入图片附件IDS" allow-clear />
            </a-form-item>
            <a-form-item label="视频附件IDS：" name="videoFileIds">
                <a-input v-model:value="formData.videoFileIds" placeholder="请输入视频附件IDS" allow-clear />
            </a-form-item>
            <a-form-item label="批语：" name="remark">
                <a-input v-model:value="formData.remark" placeholder="请输入批语" allow-clear />
            </a-form-item>
            <a-form-item label="批语用户ID：" name="remarkUserId">
                <a-input v-model:value="formData.remarkUserId" placeholder="请输入批语用户ID" allow-clear />
            </a-form-item>
            <a-form-item label="批语时间：" name="remarkTime">
                <a-date-picker v-model:value="formData.remarkTime" value-format="YYYY-MM-DD HH:mm:ss" show-time placeholder="请选择批语时间" style="width: 100%" />
            </a-form-item>
        </a-form>
        <template #footer>
            <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
            <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
        </template>
    </a-drawer>
</template>

<script setup name="exmMyQuestionHisForm">
    import { cloneDeep } from 'lodash-es'
    import { required } from '@/utils/formRules'
    import exmMyQuestionHisApi from '@/api/biz/exmMyQuestionHisApi'
    // 抽屉状态
    const visible = ref(false)
    const emit = defineEmits({ successful: null })
    const formRef = ref()
    // 表单数据
    const formData = ref({})
    const submitLoading = ref(false)

    // 打开抽屉
    const onOpen = (record) => {
        visible.value = true
        if (record) {
            let recordData = cloneDeep(record)
            formData.value = Object.assign({}, recordData)
        }
    }
    // 关闭抽屉
    const onClose = () => {
        formRef.value.resetFields()
        formData.value = {}
        visible.value = false
    }
    // 默认要校验的
    const formRules = {
    }
    // 验证并提交数据
    const onSubmit = () => {
        formRef.value
            .validate()
            .then(() => {
                submitLoading.value = true
                const formDataParam = cloneDeep(formData.value)
                exmMyQuestionHisApi
                    .exmMyQuestionHisSubmitForm(formDataParam, formDataParam.id)
                    .then(() => {
                        onClose()
                        emit('successful')
                    })
                    .finally(() => {
                        submitLoading.value = false
                    })
            })
    }
    // 抛出函数
    defineExpose({
        onOpen
    })
</script>
